<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>幸运之星</title>
    <style type="text/css">

        /* 使用通配符 选择页面上所有的元素 */
        * { padding: 0px 0px; margin: 0px 0px; }

        /* 设定页面字体默认样式 */
        body {
            font-size: 14px;
            font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
            font-weight: lighter;
        }

        /* 设置元素高度自动适应 (当元素内部包含浮动元素时使用) */
        .auto-height { height: auto; overflow: hidden; }

        /* 专门用来清除浮动 */
        .clear { clear: both ; }

        /* 用 div 实现在页面上显示一个 只有一个像素的横线 */
        .line { height: 0px; border-bottom: 1px solid #d3d3d3;  margin: 0px auto; }

        .luck-container {  width: 80% ; height: auto;  overflow: hidden; box-shadow: 0px 0px 5px 3px #dedede ; margin: 50px auto ; }

        .name-container {  line-height: 80px ; font-size: 18px ; }
        .high-brightness { background-color: #ffb441; }
        #luck-button { width: 80% ; height: 50px ; text-align: center ; font-size: 30px ; }

        .content-align-center {  text-align: center ; }

        /** 栅格系统 使用说明:
        *    假设页面上上的某一行 ( 用 class= "row" 表示 ) 可以分为 12 等份,
        *    12等份中的每一份就是一个 格子 ( 用 class="cell-1" 表示 ) ,单个 cell 宽度 为 十二分之一 行 , 即 8.3333333333%
        *    使用举例:
        *    <div class="row">
        *          <span class="cell-5" >一个5倍于单个单元格的格子</span>
        *          <span class="cell-7" >一个7倍于单个单元格的格子</span>
        *    </div>
        *    注意, 两部分 加起来,刚好是 满行 ( 12 个格子的空间 )
        **/

        .row { width: 100%;  height: auto; overflow: hidden; }

        /*设置栅格系统的浮动方式*/
        .cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6, .cell-7, .cell-8, .cell-9, .cell-10, .cell-11, .cell-12 {  float: left;  }
        .cell-1 {  width: 8.3333333333%; }/*假设每一行可以等分为12分,则每份占8.3333333333% */
        .cell-2 { width: 16.6666666667%;   }/*假设每一行可以等分为12分,则两份占16.6666666667% */
        .cell-3 { width: 25%;  }/*假设每一行可以等分为12分,则三份占25% */
        .cell-4 { width: 33.3333333333%; }
        .cell-5 { width: 41.6666666667%; }
        .cell-6 { width: 50%; }
        .cell-7 {  width: 58.3333333333%; }
        .cell-8 { width: 66.6666666667%; }
        .cell-9 { width: 75%; }
        .cell-10 { width: 83.3333333333%; }
        .cell-11 { width: 91.6666666667%; }
        .cell-12 { width: 100%;  }/*假设每一行可以等分为12分,则12份即为满行,即宽度为100% */

        .offset-1 { margin-left: 8.3333333333%; }
        .offset-2 { margin-left: 16.6666666667%;  }
        .offset-3 { margin-left: 25%;  }
        .offset-4 {  margin-left: 33.3333333333%; }
        .offset-5 { margin-left: 41.6666666667%; }
        .offset-6 { margin-left: 50%; }
        .offset-7 { margin-left: 58.3333333333%; }
        .offset-8 { margin-left: 66.6666666667%;  }
        .offset-9 {  margin-left: 75%; }
        .offset-10 { margin-left: 83.3333333333%; }
        .offset-11 { margin-left: 91.6666666667%; }

    </style>

</head>
<body>

    <div class="luck-container auto-height"></div>

    <div class="content-align-center">
        <button type="button" id="luck-button" >抽取幸运之星</button>
    </div>

    <script type="text/javascript">
        (function(){
                // 这里存放要抽取的数据集合
                const names = [
                             
                        ];

            const luckContainer =  document.querySelector( ".luck-container" );

            for( var i = 0, n = names.length ; i < n ; i++ ) {
                var span = document.createElement( "span" );
                span.innerHTML = names[ i ] ;
                span.classList.add( "cell-1" );
                span.classList.add( "content-align-center" );
                span.classList.add( "name-container" );
                luckContainer.appendChild( span );
            }

            var luckButton = document.querySelector( "#luck-button" );

            const luckFunction = function(){

                // 先清理上次的样式
                var ncs = document.querySelectorAll( ".name-container" );
                for( var m = 0, n = ncs.length ; m < n ; m++ ) {
                    var span = ncs[ m ];
                    var classList = span.classList;
                    if( classList.contains( "high-brightness" )) {
                        classList.remove("high-brightness");
                    }
                }

                var luck = Math.floor( Math.random() * names.length + 1 );
                var name = names[ luck ];

                var show = function( next ) {

                    if( luckButton.disabled == false ) {
                        luckButton.disabled = true ;
                    }

                    if( next.innerHTML == name ) {
                        if( luckButton.disabled ) {
                            luckButton.disabled = false ;
                        }
                        next.classList.add( "high-brightness" );
                        return ;// 方法结束
                    } else {

                        next.classList.add( "high-brightness" );

                        // 稍后继续
                        setTimeout( function(){
                            next.classList.remove( "high-brightness" );
                            next = next.nextElementSibling;
                            show( next );
                        } , 100 );
                    }

                }
                console.log( name );
                var first = luckContainer.firstElementChild;
                show( first );
            };

            luckButton.addEventListener( "click" , luckFunction );

        })();
    </script>

</body>
</html>